<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="../../common/import.jsp"%>
<html>
<head>
<title></title>
   <style type="text/css">
	  .grid_layout{
			width: 99.5%;
			align: center;
	  }
	  .grid_layout table{
			border-collapse: collapse;
			border: 0px solid #e6e7e9; 
			border-width: 1px 1px 1px 1px; 
			text-align: center;
	  }
	  .grid_layout th{
			border: 0px solid #e6e7e9;
			border-width: 0px;
			padding: 2px 0px;
			width: 30%;
			text-align: right;
			vertical-align: middle;
	   }
	  .grid_layout td{
			border: 0px solid #e6e7e9;
			border-width: 0px;
			padding: 2px 0px;
			text-align: left;
			vertical-align: middle;
	  }
	  
	  ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
   </style>
   <link href="${ctx}/resources/js/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="${ctx}/resources/js/ztree/jquery.ztree.core-3.4.min.js"></script>
   <script src="${ctx}/resources/js/jquery.validate.min.js" type="text/javascript"></script>
   <script type="text/javascript">
        var isEdit = ('${organ.id}' != "")?true:false;
        var setting = {
        		async: {
       				enable: true,
       				dataType: "json",
       				url:"${ctx}/sys/organ/getOrganTree.do"//,
       				//otherParam: {"id": '${organ.id}'}
       			},
       		    data: {
       		      key: {
       	   			name: "NAME"
       	   		  },
    			  simpleData: {
    				enable: true,
    				idKey: "ID",
    				pIdKey: "PARENT_ID"
    			  }
    			},
    			callback: {
    				onAsyncSuccess: zTreeOnAsyncSuccess,
    				onClick: onClick
    			}
    		};
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        	var treeObj = $.fn.zTree.getZTreeObj("organTree");
        	//treeObj.expandAll(true);
        	if(isEdit){//是否是修改操作
        		updateInit();
        		var id = '${organ.id}';
        		var node = treeObj.getNodeByParam("ID", id, null);
        		var pNode = node.getParentNode();
        		treeObj.removeNode(node);
        		if(pNode!=undefined){
        			treeObj.expandNode(pNode, true, true, true);
        		}
            }
        };
        
        $(function(){
          $.fn.zTree.init($("#organTree"), setting);
          
	      $("#formTable").validate({
			   onsubmit: true, // 是否在提交时验证 
			   //onfocusout: true, // 是否在获取焦点时验证 
			   onkeyup: false,
			   validClass: 'checked',
			   rules: {
				   name: {
						required: true,
						maxlength: 25,
						remote:{
							 type: "POST",
							 url: "${ctx}/sys/organ/validateOrganName.do",
							 dataType: "json", 
							 data: {
								 id: '${organ.id}',
								 name: function() {
									   return $("#name").val();
								   }
							 }
						}
					},
					code: {
						required: true,
						maxlength: 25
					},
					linkman: {
						maxlength: 15
					},
					officeTel: {
						maxlength: 15
					},
					remark: {
						maxlength: 250
					}
				},
				messages: {
					name: {
						required: "请输入机构名称",
						maxlength: "长度不能大于{0}",
						remote: jQuery.format("机构名称已经被使用")
					},
					code: {
						required: "请输入编码",
						maxlength: "长度不能大于{0}"
					},
					linkman: {
						maxlength: "长度不能大于{0}"
					},
					officeTel: {
						maxlength: "长度不能大于{0}"
					},
					remark: {
						maxlength: "长度不能大于{0}"
					}
				},
				success:function(label){
					label.addClass("checked").html("&nbsp;");
				},
				submitHandler: function(form) {
					$.blockUI();
					$.ajax({
		    			  url: "${ctx}/sys/organ/save.do",   // 提交的页面
		    		      data: $('#formTable').serialize(), // 从表单中获取数据
		    		      type: "POST",
		    		      success: function(data) {
		    		    	  $.unblockUI();
		    		        	if(data.success==true){
		    		        		reloadData();
		    		        		showSuccessMsg();
		    		        		parent.closeWindow();
		    		        	}else{
		    		        		showFailAlert(data.msg)
		    		        	}
		    		      },
		    		      error: function(xhr) {
		    		    	  $.unblockUI();
		    		    	  showFailAlert2(xhr);
		    		      }
		    		  })
				}
			});
	   })
	   function reloadData(){
    	   var tab = parent.$('#tabs').tabs('getSelected');
   		   var ifram = tab.find('iframe')[0];
   		   ifram.contentWindow.reloadGrid();
   		   ifram.contentWindow.reloadTree();
       }
	   function onSubmit(){
		   $("#formTable").submit();
	   }
       function updateInit(){
    	   var parentId = '${organ.parentId}';
    	   if(parentId != ''){
    		  var treeObj = $.fn.zTree.getZTreeObj("organTree");
    		  var parentNode = treeObj.getNodeByParam("ID", parentId, null);
    		  if(parentNode!=undefined){
    			  $("#parentName").attr("value", parentNode.NAME);
    		  }
   		   }
        }
       function showOrgan(){
		   var organOffset = $("#parentName").offset();
			$("#menuContent").css({left:organOffset.left + "px", top:organOffset.top + $("#parentName").outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
       }
       function onClick(e, treeId, treeNode){
    		$("#parentName").attr("value", treeNode.NAME);
    		$("#parentId").attr("value", treeNode.ID);
    		hideMenu();
       }
       function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "parentName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		function resetOrgan(){
			$("#parentName").attr("value", "");
			$("#parentId").attr("value", "");
		}
   </script>
</head>
<body>
	<div class="easyui-layout" region="center" style="text-align: left;" fit="true">
		<div region="center" border="false" style="padding-top: 10px; text-align: left; background: #fff; border: 1px solid #ccc;">
			<form id="formTable" method="post" >
			    <input type="hidden" name="id" value="${organ.id}"/>
				<table border="0" class="grid_layout" cellpadding="0" cellspacing="0">
					<tr>
						<th><span style="color: red;">*</span>机构名称：</th>
						<td>
						<input name="name" type="text" style="width: 150px;" id="name" value="${organ.name}"/>
						</td>
					</tr>
					<tr>
						<th>所属机构：</th>
						<td>
						<input type="text" readonly="readonly" style="width: 150px;" id="parentName" onfocus="showOrgan();"/>
						<a id="delBtn" class="easyui-linkbutton" data-options="plain:true" href="#" onclick="resetOrgan(); return false;">清空</a>
						<input type="hidden" id="parentId" name="parentId" value="${organ.parentId}"/>
						</td>
					</tr>
					<tr>
						<th><span style="color: red;">*</span>编码：</th>
						<td>
						<input name="code" type="text" style="width: 150px;" id="code" value="${organ.code}"/>
						</td>
					</tr>
					<tr>
						<th>联系人：</th>
						<td>
						<input name="linkman" type="text" style="width: 150px;" id="linkman" value="${organ.linkman}"/>
						</td>
					</tr>
					<tr>
						<th>办公电话：</th>
						<td>
						<input name="officeTel" type="text" style="width: 150px;" id="officeTel" value="${organ.officeTel}"/>
						</td>
					</tr>
					<tr>
						<th>备注：</th>
						<td><textarea id="remark" name="remark" rows="6" cols="40" >${organ.remark}</textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;">
			<a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="onSubmit();">提交</a>
			<a class="easyui-linkbutton" iconcls="icon-cancel" href="javascript:void(0)" onclick="parent.closeWindow();">取消</a>
		</div>
	</div>
	<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
		<ul id="organTree" class="ztree" style="margin-top:0; width:180px; height: 280px;">
		</ul>
	</div>
</body>
</html>
